<template>
  <!-- 执法规范 -->
  <view class="lawEnforcement">
    <view class="wrapper-content">
      <scroll-view
        scroll-y="true"
        @scrolltolower="scrollBottom"
        @scroll="scrollHeight"
        :scroll-top="scrollTop"
        :style="[
          {
            height: !loading && !noMore ? '95vh' : '100%',
          },
        ]"
        v-if="dataSource.length"
      >
        <view
          class="wrapper-item"
          v-for="(v, i) in dataSource"
          :key="i"
          @click="dataListHandle(v)"
        >
          <view class="md">
            <view class="line2-hidden title">
              <text
                :style="{
                  backgroundColor: !v.readStatus ? '#EB0101' : '#BBBBBB',
                }"
              ></text>
              {{ v.title }}
            </view>
            <view class="time">发布时间：{{ v.createTime }}</view>
          </view>
        </view>
        <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
      </scroll-view>

      <view v-if="!dataSource.length">
        <u-empty
          mode="list"
          text="暂无内容！"
          :icon="baseImgUrl + 'no-icon2.png'"
        ></u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import { messageList } from "@/api/messages.js";
import mixin from "@/utils/mixin.js";
import { handleClickRouter } from "@/utils/util.js";

export default {
  mixins: [mixin],
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      dataSource: [],
      pageBottom: false,
      scrollTop: 0,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onLoad() {
    this.dataSource = [];
    this.pageConfig.pageNo = 1;
    this.getList();

    this.scrollTop = uni.getStorageSync("scrollTop") || 0;
  },
  onShow() {
    this.scrollTop = 0;
    uni.removeStorage("scrollTop");
  },
  methods: {
    handleClickRouter,
    dataListHandle(v) {
      this.dataSource.forEach((item, i) => {
        if (item.id == v.id) {
          this.dataSource[i].readStatus = 1;
        }
      });

      uni.navigateTo({
        url: `/guideInfo/workList/workDetail?id=${v.id}&noticeType=${v.noticeType}&index=1`,
      });
    },
    scrollHeight(e) {
      uni.setStorageSync("scrollTop", e.detail.scrollTop);
    },
    scrollBottom() {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) {
        this.getList();
      } else {
        this.pageBottom = true;
      }
    },
    getList() {
      let data = {
        noticeType: 5,
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      messageList(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
  },
};
</script>

<style lang="scss">
.lawEnforcement {
  height: 100%;
  .wrapper-content {
    background: #f9f9f9;
    height: 100%;
    padding: 24rpx 20rpx;
    .wrapper-item {
      position: relative;
      padding: 30rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;
      .md {
        padding: 0 15rpx;
        .title {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          margin-bottom: 28rpx;

          text {
            position: absolute;
            top: 21px;
            left: 9px;
            width: 14rpx;
            height: 14rpx;
            border-radius: 50%;
          }
        }

        .time {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
